<template>
  <div class="h-full flex flex-col bg-#FAF9F9">
    <div class="z-1">
      <img src="https://jwc-static.jdwxk.com/imgs/mall/bg2.png" class="absolute w-full">
      <div class="absolute left-10 top-8 flex items-start gap-1">
        <img src="https://jwc-static.jdwxk.com/imgs/mall/star.png" class="w-10">
        <span class="text-7 font-600 leading-none">{{ userStore.getUserInfo.score }}</span>
        <!-- <img src="https://jwc-static.jdwxk.com/imgs/mall/arrow-right.png" class="w-2"> -->
      </div>
    </div>
    <div ref="boxRef" class="left-0 right-0 z-1 m-t-30 h-full overflow-y-auto rounded-t-5 bg-white p-x-4">
      <van-tabs v-model:active="activeName" :offset-top="boxTop" sticky class="custom-tabs" color="#FF2F4F" title-active-color="#333" title-inactive-color="#999">
        <van-tab title="获取记录" name="fetch-records">
          <FetchRecords type="0" />
        </van-tab>
        <van-tab title="消耗记录" name="consumption-records">
          <FetchRecords type="1" />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script lang='ts' setup>
import FetchRecords from './FetchRecords/index.vue'
import { useUserStoreWidthOut } from '@/store/modules/user'
// import ConsumptionRecords from './ConsumptionRecords/index.vue'

const activeName = ref('fetch-records')
const userStore = useUserStoreWidthOut()
const boxRef = ref<HTMLDivElement>()

const boxTop = ref(0)
onMounted(async () => {
  if (!boxRef.value) {
    return
  }
  await nextTick()
  boxTop.value = boxRef.value.offsetTop
})
</script>

<style lang='less'>
// .custom-tabs {
//   .van-tabs__wrap {
//     border-bottom: 1px rgba(153, 153, 153, 0.2) solid;
//   }
// }
</style>
